<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>文章分类：<input type='text' v-model="searchCondition.category" /><span>{{searchCondition.category}}</span></p>
        <p>发布状态：<input type='text' v-model="searchCondition.status" /><span>{{searchCondition.status}}</span></p>
        <button>搜索</button>
        <button v-on:click="clear">重置</button>
        <br />
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>标题</th>
                <th>分类</th>
                <th>时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.status}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>
    <script type="module">
        import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
        createApp({
            data() {
                // 定义数据
                return {
                    searchCondition: {
                        category: "",
                        status: ""
                    },
                    articleList: [
                        { title: "vue3.0", category: "前端", time: "2020-01-01", status: "未发布" },
                        { title: "Java", category: "后端", time: "2022-05-11", status: "草稿发布" },
                        { title: "js", category: "前端", time: "2024-02-24", status: "已发布" },
                    ] 
                }
            },
            methods: {
                clear: function () {
                    // 清空搜索框
                    // 在methods中定义的方法，this指向当前实例对象
                    this.searchCondition.category = "";
                    this.searchCondition.status = "";
                },
            },
            mounted() {
                console.log("挂在完毕，发送请求获取数据");
            }
        }).mount("#app");
    </script>
</body>

</html>